<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>


<div id="imageManageDialog" class="container-fluid">
    <form enctype="multipart/form-data">
        <div class="file-loading">
            <input id="kv-explorer" type="file" multiple>
        </div>
        <%--<button type="submit" class="btn btn-primary">提交</button>--%>
    </form>
</div>
<script>
    var images = ${images};
    var basePath = '${basePath}';
    var previewImages = [];
    images.forEach(function(d){
        d.url = basePath + d.url;
        previewImages.push(basePath + "/manage/article/loadImage/"+d.key);
    });
    $(function(){
        $("#kv-explorer").fileinput({
            'theme': 'explorer-fa',
            'uploadUrl': '${basePath}/manage/article/upload/${articleId}',
            <%--deleteUrl:'${basePath}/manage/article/deleteImage/${articleId}',--%>
            overwriteInitial: false,
            initialPreviewAsData: true,
            allowedFileExtensions : ['png'],

            initialPreview: previewImages
//                [
//                "http://lorempixel.com/1920/1080/nature/1",
//                "http://lorempixel.com/1920/1080/nature/2",
//                "http://lorempixel.com/1920/1080/nature/3"
//            ]
        ,
            initialPreviewConfig: images
//                [
//                {caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
//                {caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
//                {caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
//            ]
        });
//        // 添加上传成功的回调事件，异步上传返回结果处理
//        $("#kv-explorer").on("fileuploaded", function (event, t, previewId, index) {
//            // 获取服务端给客户端的响应
//            var result = t.response;
//            images.push(result);
//            console.log(result);
//        });
//        $("#kv-explorer").on('filepredelete', function(event, key, jqXHR, data) {
//            console.log(event,key,data)
////            if (!confirm("确定删除原文件？删除后不可恢复")) {
////                return false;
////            }
//        });
    });
</script>